<template>
    <div class="gun" style>
        <el-button type="primary" @click="dialogVisible = true">添加课程</el-button>
        <el-dialog title="请输入添加的课程信息" :visible.sync="dialogVisible" width="30%">
            <el-form ref="form" :model="addCourseForm" label-width="80px">
                <el-form-item label="课程名称">
                    <el-input v-model="addCourseForm.courseName"></el-input>
                </el-form-item>
                <el-form-item label="课程简介">
                    <el-input type="textarea" v-model="addCourseForm.courseDefine"></el-input>
                </el-form-item>

                <el-form-item label="学年">
                    <el-select v-model="addCourseForm.courseYear" placeholder="请选择学年">
                        <el-option label="2021" value="2021"></el-option>
                        <el-option label="2022" value="2022"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="学期">
                    <el-select v-model="addCourseForm.courseTerm" placeholder="请选择学期">
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="课程人数">
                    <el-input-number v-model="addCourseForm.courseIntake" @change="handleChange" :min="1" :max="50" label="描述文字"></el-input-number>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="onSubmit()">立即创建</el-button>
                    <el-button>取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>

        <el-table :data="infos" style="width: 100%">
            <el-table-column prop="courseId" label="课程编号" width="100"></el-table-column>
            <el-table-column prop="courseName" label="课程名称" width="150"></el-table-column>

            <el-table-column prop="courseDefine" label="课程简介" width="600"></el-table-column>
            <el-table-column prop="courseYear" label="学年" width="100"></el-table-column>
            <el-table-column prop="courseTerm" label="学期" width="100"></el-table-column>
            <el-table-column prop="courseIntake" label="课程人数" width="100"></el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <!-- <el-button size="small" type="danger" @click="del(scope.row)"
            >删除</el-button
                    >-->
                    <button type="button" class="btn btn-primary btn-danger" data-toggle="modal" data-target="#myModalsc">删除</button>
                    <div class="modal fade" id="myModalsc" ref="myModalsc">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal">
                                        <span aria-hidden="true">×</span>
                                        <span class="sr-only">关闭</span>
                                    </button>
                                    <h4 class="modal-title" style="font-size: 18px">提示</h4>
                                </div>
                                <div class="modal-body">
                                    <p style="font-size: 16px">
                                        <i class="el-icon-warning" style="color: red"></i>此操作将永久删除该文件, 是否继续?
                                    </p>
                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                                    <button type="button" class="btn btn-primary" @click="del(scope.row)">确定</button>
                                </div>
                            </div>
                        </div>
                    </div>
                    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal" @click="initInfo(scope.row)">编辑</button>
                </template>
            </el-table-column>
        </el-table>

        <div class="modal fade" id="myModal" ref="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">
                            <span aria-hidden="true">×</span>
                            <span class="sr-only">关闭</span>
                        </button>
                        <h4 class="modal-title">编辑课程</h4>
                    </div>
                    <div class="modal-body">
                        <el-form ref="form" :model="editCourseForm" label-width="80px">
                            <el-form-item label="课程Id">{{ editCourseForm.courseId }}</el-form-item>
                            <el-form-item label="课程名称">
                                <el-input type="text" v-model="editCourseForm.courseName">{{ editCourseForm.courseName }}</el-input>
                            </el-form-item>
                            <el-form-item label="课程简介">
                                <el-input type="textarea" v-model="editCourseForm.courseDefine">{{ editCourseForm.courseDefine }}</el-input>
                            </el-form-item>

                            <el-form-item label="学年">
                                <el-select v-model="editCourseForm.courseYear" placeholder="请选择学年">
                                    <el-option label="2021" value="2021"></el-option>
                                    <el-option label="2022" value="2022"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="学期">
                                <el-select v-model="editCourseForm.courseTerm" placeholder="请选择学期">
                                    <el-option label="1" value="1"></el-option>
                                    <el-option label="2" value="2"></el-option>
                                </el-select>
                            </el-form-item>

                            <el-form-item label="课程人数">
                                <el-input-number v-model="editCourseForm.courseIntake" @change="handleChange" :min="1" :max="50" label="描述文字">{{ editCourseForm.courseIntake }}</el-input-number>
                            </el-form-item>
                        </el-form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" @click="edit()">编辑</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- <div class="modal fade" id="myModalsc" ref="myModalsc">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">
              <span aria-hidden="true">×</span><span class="sr-only">关闭</span>
            </button>
            <h4 class="modal-title" style="font-size: 18px;">提示</h4>
          </div>
         <div class="modal-body">
           <p style="font-size: 16px;"><i class="el-icon-warning" style="color:red"></i>此操作将永久删除该文件, 是否继续?</p>
         </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">
              取消
            </button>
            <button type="button" class="btn btn-primary" @click="del(scope.row)">
              确定
            </button>
          </div>
        </div>
      </div>
        </div>-->
    </div>
</template>

<script>
export default {
    data() {
        return {
            num: 1,
            // form: {
            //     name: '',
            //     region: '',
            //     date1: '',
            //     date2: '',
            //     delivery: false,
            //     type: [],
            //     resource: '',
            //     desc: ''
            //   },
            infos: [],
            search: '',
            dialogVisible: false,
            addCourseForm: {
                courseName: '',
                courseDefine: '',
                courseYear: 0,
                courseTerm: 0,
                courseIntake: 0
            },
            editCourseForm: {
                courseId: 0,
                courseName: '',
                courseDefine: '',
                courseYear: 0,
                courseTerm: 0,
                courseIntake: 0
            },

            response: []
        }
    },
    methods: {
        // handleClose(done) {
        //     this.$confirm('确认关闭？')

        //   },

        onSubmit() {
            console.log(this.addCourseForm)
            this.$axios
                .post('http://10.197.26.58:8080/addCourse', this.addCourseForm)
                .then(res => {
                    console.log(res)
                    alert('添加成功')
                })
                .catch(function (error) {
                    //请求失败处理
                    console.log(error)
                })
        },
        initInfo(row) {
            this.editCourseForm = row
        },

        handleEdit(index, row) {
            console.log(index, row)
        },
        handleDelete(index, row) {
            console.log(index, row)
        },
        handleChange(value) {
            console.log(value)
        }

        // addex() {
        //   this.$axios
        //     .post("http://10.197.26.58:8001/addCourse", this.addCourseForm)
        //     .then((res) => {
        //       this.infos = res.data;
        //       console.log(this.res);
        //     })
        //     .catch(function (error) {
        //       //请求失败处理
        //       console.log(error);
        //     });
        // },
    },
    mounted() {
        this.$axios
            .get('http://10.197.26.58:8080/getcourselist')
            .then(response => {
                this.infos = response.data
                console.log(this.infos)
            })
    }
}
</script>
<style scoped>
.gun {
    margin-top: 20px;
}
</style>
